<template>
  <div class="production-table" id="ProductionTable">
    <div class="table-title">
      <div class="navigation-title">
        <div
          :class="['tabs-box']"
          v-for="item in toptabsList"
          :key="item.type"
          @click="toptabsFun(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="navigation-button">
        <general-button
          @operation="addProcessFun"
          btnText="添加"
          btnPowerNum="A9D625DF-2558-4C28-A7FC-50A342CF6775"
        ></general-button>
        <general-button
          @operation="alldelProcess"
          btnText="批量删除"
          btnPowerNum="CA419C2B-259F-44B8-903D-4DCC2B0D0D9D"
        ></general-button>
      </div>
    </div>
    <div class="table-box">
      <a-table
        className="components-table-demo-nested"
        :columns="processColumns"
        :row-key="(record) => record.RouteOperationID"
        :data-source="processData"
        :loading="processLoading"
        :scroll="{ y: productionTableHegint }"
        :row-selection="{
          selectedRowKeys: processelectedRowKeys,
          onChange: processelectChangeFun,
        }"
        :customRow="rowClick"
        :rowClassName="setRowClassName"
        :pagination="false"
        size="middle"
      >
        <template slot="name" slot-scope="name">
          {{ name }}
        </template>
        <template slot="action" slot-scope="text, record">
          <div class="chart-manage">
            <a-icon
              type="edit"
              class="icon-class"
              @click="editProcessFun(record)"
            />
            <a-icon
              type="delete"
              class="icon-class"
              @click="productDel(record)"
            />
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { getstdoperationtorouteID } from "@/api/router-manage/index";
import { getStdOperationList } from "@/api/StdOperation/index";
import { delRouteoperation } from "@/api/route-operation/index";
import { getTableScroll } from "@/common/table-calc";
import GeneralButton from "@/components/be-current-btn.vue";
//工序列表
const processColumns = [
  {
    title: "工序序号",
    dataIndex: "IndexNo",
    sorter: true,
    width: "10%",
    align: "center",
  },
  {
    title: "工序名称",
    dataIndex: "StdOperationName",

    scopedSlots: { customRender: "name" },
    align: "center",
  },
  {
    title: "工序描述",
    dataIndex: "OperationComment",

    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "10%",
    align: "center",

    scopedSlots: { customRender: "action" },
  },
]; //表格表头
export default {
  props: ["RouteID", "technoLogyInfo", "upCurrentRow"],
  components: {
    GeneralButton,
  },
  data() {
    return {
      productionTableHegint: 0, //工序表格高度
      toptabsList: [
        {
          name: "工序",
          type: 1,
          cName: "ProductionTable",
          clickName: "addprocessshowFun",
        },
      ], //工序Tab列表
      toptabsInfo: {
        name: "工序",
        type: 1,
        cName: "ProductionTable",
        clickName: "addprocessshowFun",
      }, //工序Tab选择后信息
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 200,
        },
        KeyWords: "",
      }, //搜索信息
      procedureData: [], //产品列表
      currentRow: {}, //点击行的值
      processLoading: false, //序号表格loading
      processColumns, //序号表头
      processelectedRowKeys: [], //序号选中id
      processselectedRows: [], //选中信息
      processData: [], //工序列表
      rowClick: (record, index) => {
        return {
          on: {
            click: () => {
              this.currentRow = record;
              this.$emit("currentInfo", this.currentRow);
            },
          },
        };
      }, //表格单行点击
    };
  },
  methods: {
    //添加工序
    addProcessFun(value) {
      if (this.technoLogyInfo.IsCheck)
        return this.$message.error("当前工艺已审核,请反审核后再处理工序");
      this.GetStdOperationListFun(value);
    },
    //修改工序
    editProcessFun(value) {
      if (!this.hasPermission("434E4F87-2A90-4F16-87B7-7CA6CB5A0427")) return;
      if (this.technoLogyInfo.IsCheck)
        return this.$message.error("当前工艺已审核,请反审核后再处理工序");
      this.GetStdOperationListFun(value);
    },
    //单项删除关联工序
    productDel(item) {
      if (!this.hasPermission("CA419C2B-259F-44B8-903D-4DCC2B0D0D9D")) return;
      if (this.technoLogyInfo.IsCheck)
        return this.$message.error("当前工艺已审核,请反审核后再操作删除工序");
      const that = this;
      this.$confirm({
        title: `确认要删除关联的【${item.StdOperationName}】嘛？`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await delRouteoperation([item]);
          if (res.Data == "") {
            that.$message.info("删除成功");
          } else {
            that.$message.error(res.Data);
          }
          that.getstdoperationtorouteidFun(that.RouteID);
        },
        onCancel() {},
      });
    },
    //多项删除关联工序
    alldelProcess() {
      if (this.processselectedRows.length <= 0)
        return this.$message.error("请在表格选中项再点击批量删除");
      if (this.technoLogyInfo.IsCheck)
        return this.$message.error("当前工艺已审核,请反审核后再操作删除工序");
      const that = this;
      this.$confirm({
        title: `确认要关联选中【${this.processselectedRows.length}】项嘛？`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await delRouteoperation(that.processselectedRows);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.processselectedRows = [];
            that.processelectedRowKeys = [];
          } else {
            that.$message.error(res.Data);
          }
          that.getstdoperationtorouteidFun(that.RouteID);
        },
        onCancel() {},
      });
    },
    //点击表格
    setRowClassName(record, index) {
      return record.IndexNo == this.currentRow.IndexNo ? "clickRowStyl" : ""; //
    },
    //获取工序列表
    async GetStdOperationListFun(value) {
      const res = await getStdOperationList(this.searchItem);
      this.procedureData = res.Data.Data;
      this.procedureTotal = res.Data.TotalNumber;
      this.$emit("addprocess", {
        isEdit: value ? true : false,
        data: value ? JSON.parse(JSON.stringify(value)) : {},
        show: true,
        procedureData: res.Data.Data,
      });
    },
    popUp() {
      this.getstdoperationtorouteidFun(this.RouteID);
    },
    processelectChangeFun(selectedRowKeys, selectedRows) {
      this.processselectedRows = selectedRows; //选中项信息
      this.processelectedRowKeys = selectedRowKeys; //选中项ID
    }, //序号选择处理
    //查询工艺的工序
    async getstdoperationtorouteidFun(id) {
      const res = await getstdoperationtorouteID(id);
      this.processData = res.Data;
    },
  },
  computed: {
    showIdFun: function () {
      return this.RouteID;
    },
  },
  watch: {
    showIdFun: function (newValue) {
      this.getstdoperationtorouteidFun(newValue);
    },
    upCurrentRow: {
      handler(newValue) {
        this.currentRow = newValue;
      },
    },
  },

  updated() {
    this.$nextTick(() => {
      this.productionTableHegint = getTableScroll(40, "ProductionTable");
    });
  },
};
</script>

<style lang="less" scoped>
.production-table {
  height: 100%;
}
.table-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  align-items: center;
  .navigation-title {
    .tabs-box {
      margin: 0 0.625rem;
      color: #000000;
      padding: 0.3125rem 1.875rem;
      font-weight: 700;
      font-size: 1.125rem;
    }
  }
  .navigation-button {
    display: flex;
    button:nth-child(1) {
      margin-right: 1.25rem;
    }
  }
}

/deep/ .clickRowStyl {
  background: #e6f7ff !important;
  color: #000000 !important;
}
/deep/.ant-table-body {
  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}
/deep/.ant-table-header {
  overflow-y: hidden !important;
}
</style>
